<template>
	<navigator class="resort-wrap" hover-class="none" :url="`/pages/hy/scenic/detail?id=${resort?.id}`">
		<image :src="resort?.cover_url" class="logo" />
		<view class="section">
			<view class="name">
				{{ resort?.name }}
				<image :src="`${imgBaseUrl}icon-right.png`" class="icon" />
			</view>
			<view class="specialty">{{ resort?.specialty }}</view>
			<view class="bot">
				<text class="today_opening" :class="{ closed: !resort?.today_opening }">
					{{ resort?.today_opening ? "开园中" : "已闭园" }}
				</text>
				<text class="open-time">{{ openTime }}</text>
			</view>
		</view>
	</navigator>
</template>

<script setup lang="ts">
import { formatTime } from "@/mixins/mixins"
interface Resort {
	id: string
	cover_url: string
	name: string
	// 景区特色
	specialty: string
	// 今日是否开园
	today_opening: boolean
	// 开园时间
	open_time: string
	// 闭园时间
	close_time: string
	// 停止入园时间
	stop_entry_time: string
}

interface ResortProps {
	resort: Resort
}

import { computed } from "vue"

const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps<ResortProps>()

const openTime = computed(
	() =>
		`${formatTime(props?.resort.open_time)}-${formatTime(props?.resort.close_time)}开放（${formatTime(
			props?.resort.stop_entry_time
		)}停止入园）`
)
</script>

<style lang="scss" scoped>
.resort-wrap {
	display: flex;
	align-items: center;

	.logo {
		width: 128rpx;
		height: 128rpx;
		border-radius: 12rpx;
	}

	.section {
		margin-left: 20rpx;

		.name {
			display: inline-flex;
			align-items: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #1d2129;
			line-height: 44rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}

		.specialty {
			margin: 8rpx 0;
			font-weight: 400;
			font-size: 24rpx;
			color: #86909c;
			line-height: 34rpx;
		}

		.bot {
			display: flex;
			align-items: center;

			.today_opening {
				margin-right: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #00b42a;
				line-height: 34rpx;

				&.closed {
					color: #1d2129;
				}
			}

			.open-time {
				font-weight: 400;
				font-size: 24rpx;
				color: #86909c;
				line-height: 34rpx;
			}
		}
	}
}
</style>
